<template>
  <div v-if="orderDatalist">
    <Drawer :closable="false" width="700" v-model="isShow" scrollable>
      <div id="printDiv" style="height: 100%;">
        <h2 class="newfont">万家惠采 - 采购订单</h2>
        <Divider style="margin: 5px 0 !important" v-show="isPrint" />
        <Card :bordered="false" dis-hover class="i-table-no-border">
			<h3>订单信息</h3>
			<Row class="mb10 newfont">
			  <Col span="12">订单号：{{ orderDatalist.orderInfo.order_id }}</Col>
			  <Col span="12">订单状态：{{ orderDatalist.orderInfo._status._title }}</Col>
			</Row>
			<Row class="mb10 newfont">
			  <Col span="12">商品总数：{{ orderDatalist.orderInfo.total_num }}</Col>
			  <Col span="12">商品总价：{{ orderDatalist.orderInfo.total_price }} 元</Col>
			</Row>
			
			<!-- <Row class="mb10 newfont" v-show="orderDatalist.orderInfo.pay_postage > 0 || orderDatalist.orderInfo.coupon_price > 0">
			  <Col span="12" v-show="orderDatalist.orderInfo.pay_postage > 0">交付邮费：{{ orderDatalist.orderInfo.pay_postage }} 元</Col>
			  <Col span="12"  v-show="orderDatalist.orderInfo.coupon_price > 0">优惠券金额：{{ orderDatalist.orderInfo.coupon_price }} 元</Col>
			</Row>
			<Row class="mb10 newfont" v-show="orderDatalist.orderInfo.levelPrice > 0 || orderDatalist.orderInfo.memberPrice > 0">
			  <Col span="12" v-show="orderDatalist.orderInfo.levelPrice > 0">用户等级优惠：{{ orderDatalist.orderInfo.levelPrice || 0.0 }}</Col>
			  <Col span="12" v-show="orderDatalist.orderInfo.memberPrice > 0">付费会员优惠：{{ orderDatalist.orderInfo.memberPrice || 0.0 }}</Col>
			</Row>
			<Row class="mb10 newfont" v-show="orderDatalist.orderInfo.deduction_price > 0 || orderDatalist.orderInfo.pay_price > 0">
			  <Col span="12" v-show="orderDatalist.orderInfo.deduction_price > 0">积分抵扣：{{ orderDatalist.orderInfo.deduction_price || 0.0 }} 元</Col>
			  <Col span="12" v-show="orderDatalist.orderInfo.pay_price > 0">实际支付：{{ orderDatalist.orderInfo.pay_price }} 元</Col>
			</Row> -->
			
			<div class="divflex newfont">
			  <div class="item mb10" v-show="orderDatalist.orderInfo.pay_postage > 0">交付邮费：{{ orderDatalist.orderInfo.pay_postage }} 元</div>
			  <div class="item mb10" v-show="orderDatalist.orderInfo.coupon_price > 0">优惠券金额：{{ orderDatalist.orderInfo.coupon_price }} 元</div>
			  
			  <!-- <div class="item mb10" v-show="orderDatalist.orderInfo.levelPrice > 0">用户等级优惠：{{ orderDatalist.orderInfo.levelPrice || 0.0 }}</div> -->
			  <div class="item mb10" v-show="orderDatalist.orderInfo.memberPrice > 0">付费会员优惠：{{ orderDatalist.orderInfo.memberPrice || 0.0 }}</div>
			 
			  <div class="item mb10" v-show="orderDatalist.orderInfo.deduction_price > 0">积分抵扣：{{ orderDatalist.orderInfo.deduction_price || 0.0 }} 元</div>
			  <div class="item mb10" v-show="orderDatalist.orderInfo.pay_price > 0">实际支付：{{ orderDatalist.orderInfo.pay_price }} 元</div>
			  
			  <div class="item mb10">会员等级优惠：{{ orderDatalist.orderInfo.vip_true_price}} 元</div>
			  <div class="item mb10">发货时间：{{ orderDatalist.orderInfo.delivery_time | filterDeliver }}</div>
			  <div class="item mb10">支付时间：{{ orderDatalist.orderInfo.add_time | filterTime }}</div>
			  
			  <div class="item fontColor3 mb10" v-if="parseFloat(orderDatalist.orderInfo.refund_price)">退款金额：{{ parseFloat(orderDatalist.orderInfo.refund_price) }}</div>
			  <div class="item fontColor3 mb10" v-if="parseFloat(orderDatalist.orderInfo.use_integral)">使用积分：{{ parseFloat(orderDatalist.orderInfo.use_integral) }}</div>
			  <div class="item fontColor3 mb10" v-if="parseFloat(orderDatalist.orderInfo.back_integral)">退回积分：{{ parseFloat(orderDatalist.orderInfo.back_integral) }}</div>
			  <div class="item fontColor3 mb10" v-if="parseFloat(orderDatalist.orderInfo.gain_integral)">赠送积分：{{ parseFloat(orderDatalist.orderInfo.gain_integral) }}</div>
			
			  <div class="item mb10">支付方式： {{ orderDatalist.orderInfo.pay_type == 'yue' ?  '余额支付' : '采购审核'}}</div>
			
			  
			  <div class="item mb10" v-if="orderDatalist.orderInfo.advice">审核意见：{{ orderDatalist.orderInfo.advice }}</div>
			  <div class="item mb10" v-if="orderDatalist.orderInfo.shipping_type === 2 && orderDatalist.orderInfo.refund_status === 0 && orderDatalist.orderInfo.paid === 1">门店名称：{{ orderDatalist.orderInfo._store_name }}</div>
			  <div class="item mb10" v-if="orderDatalist.orderInfo.shipping_type === 2 &&orderDatalist.orderInfo.refund_status === 0 &&orderDatalist.orderInfo.paid === 1">核销码：{{ orderDatalist.orderInfo.verify_code }}</div>
			  <div class="item mb10" v-if="orderDatalist.orderInfo.remark && !isPrint" >商家备注：{{ orderDatalist.orderInfo.remark }}</div>
			  <div class="item mb10" v-if="orderDatalist.orderInfo.fictitious_content">虚拟发货备注：{{ orderDatalist.orderInfo.fictitious_content }}</div>
			</div>
		<div v-if="orderDatalist.orderInfo.mark">
		  <h3 v-if="orderDatalist.orderInfo.mark">客户备注信息</h3>
		  <Row class="mb10">
		    <Col span="12" class="fontColor2">{{ orderDatalist.orderInfo.mark }}</Col>
		  </Row>
		</div>
         <h3>购物清单</h3>
		 <table border="1" cellspacing="0" style='' width="100%">
			 <thead><tr><th colspan="4" style="padding: 5px;">订单号：{{ orderDatalist.orderInfo.order_id }}</th></tr></thead>
			 <tr v-for="(item,index) in shopping" :key="index">
				<td style="padding: 5px;width: 10px;"> {{index+1}}</td>
				<td style='padding: 5px; word-break: break-all;word-wrap: break-word;'>
          <div style="color:red;">{{item.productInfo.attrInfo.bar_code}}</div>
          <div>{{ item.productInfo.store_name }}</div>  
        </td>
				<td style='padding: 5px;'>{{item.truePrice | filterTruePrice}} 元 X {{ item.cart_num }} {{item.productInfo.unit_name}}</td>
				<td style='padding: 5px;'>{{ item.sum_true_price }} 元</td>
			 </tr>
		 </table>
		 
        <!-- <div v-for="(item,index) in shopping" :key="index">
          <Row class="mb10 newfont">
            <Col span="10">{{ item.productInfo.store_name }}</Col>
            <Col span="2"></Col>
            <Col span="6">{{item.truePrice}} 元 X {{ item.cart_num }} {{item.productInfo.unit_name}}</Col>
            <Col span="6">{{ item.sum_true_price }} 元</Col>
          </Row>
         </div> -->
			<Row class="mb10 newfont" style="padding-top: 20px;">
			  <Col span="3">核单人：</Col>
			  <Col span="6" style="border-bottom: 1px solid #000;">&nbsp;</Col>
			</Row>
          <Divider style="margin: 20px 0 !important" />
          
          <!-- <Row class="mb10 newfont">
            <Col span="12" class="fontColor3 mb10" v-if="parseFloat(orderDatalist.orderInfo.refund_price)">退款金额：{{ parseFloat(orderDatalist.orderInfo.refund_price) }}</Col>
            <Col span="12" class="fontColor3 mb10" v-if="parseFloat(orderDatalist.orderInfo.use_integral)">使用积分：{{ parseFloat(orderDatalist.orderInfo.use_integral) }}</Col>
            <Col span="12" class="fontColor3 mb10" v-if="parseFloat(orderDatalist.orderInfo.back_integral)">退回积分：{{ parseFloat(orderDatalist.orderInfo.back_integral) }}</Col>
            <Col span="12" class="fontColor3 mb10" v-if="parseFloat(orderDatalist.orderInfo.gain_integral)">赠送积分：{{ parseFloat(orderDatalist.orderInfo.gain_integral) }}</Col>
            <Col span="12" class="mb10">发货时间：{{ orderDatalist.orderInfo.delivery_time | filterDeliver }}</Col>
            <Col span="12" class="mb10">支付时间：{{ orderDatalist.orderInfo.add_time | filterTime }}</Col>
            <Col span="12" class="mb10">支付方式：{{ orderDatalist.orderInfo.pay_type == 'yue' ?  '余额支付' : '采购审核'}}</Col> -->
            <!-- <Col span="12" class="mb10" v-if="is_refund != 1">推广人：{{ orderDatalist.orderInfo.spread_name + '/' + orderDatalist.orderInfo.spread_uid }}</Col> -->
            <!-- <Col span="24" class="mb10" v-if="orderDatalist.orderInfo.advice" >审核意见：{{ orderDatalist.orderInfo.advice }}</Col>
            <Col span="12" class="mb10" v-if="orderDatalist.orderInfo.shipping_type === 2 && orderDatalist.orderInfo.refund_status === 0 && orderDatalist.orderInfo.paid === 1">门店名称：{{ orderDatalist.orderInfo._store_name }}</Col>
            <Col span="12" class="mb10" v-if="orderDatalist.orderInfo.shipping_type === 2 &&orderDatalist.orderInfo.refund_status === 0 &&orderDatalist.orderInfo.paid === 1">核销码：{{ orderDatalist.orderInfo.verify_code }}</Col>
            <Col span="24" class="mb10" v-if="orderDatalist.orderInfo.remark && !isPrint" >商家备注：{{ orderDatalist.orderInfo.remark }}</Col>
            <Col span="24" class="mb10" v-if="orderDatalist.orderInfo.fictitious_content">虚拟发货备注：{{ orderDatalist.orderInfo.fictitious_content }}</Col>
          </Row> -->

          <Divider style="margin: 20px 0 !important" v-if="orderDatalist.orderInfo.custom_form.length"/>

          <div class="ivu-description-list-title" v-if="orderDatalist.orderInfo.custom_form.length">表单信息</div>

          <Row class="mb10" v-if="orderDatalist.orderInfo.custom_form.length">
            <Col
              class="mb10"
              :span="item.label !== 'text' ? 12 : 24"
              v-if="item.label !== 'img'"
              v-for="(item, index) in orderDatalist.orderInfo.custom_form"
              :key="index"
            >{{ item.title }}：{{ item.value }}</Col>
            <Col span="24" v-else>
              <div>{{ item.title }}：</div>
              <div class="pic">
                <div v-for="(img, i) in item.value" :key="i" class="img">
                  <img v-viewer :src="img" alt />
                </div>
              </div>
            </Col>
          </Row>
          <div v-if="orderDatalist.orderInfo.delivery_type === 'express'">
            <Divider style="margin: 20px 0 !important" />
            <div class="ivu-description-list-title">物流信息</div>
            <Row class="mb10">
              <Col span="12">快递公司：{{ orderDatalist.orderInfo.delivery_name }}</Col>
              <Col span="12">
                快递单号：{{ orderDatalist.orderInfo.delivery_id }}
                <Button type="info" size="small" @click="openLogistics">物流查询</Button>
              </Col>
            </Row>
          </div>
		  <h3>收货信息</h3>
		  <Row class="mb10 newfont">
		  	<Col span="12">订单号：{{ orderDatalist.orderInfo.order_id }}</Col>
		    <Col span="12">下单人昵称：{{ orderDatalist.userInfo.nickname }}</Col>
		    <Col span="12">收货人：{{ orderDatalist.orderInfo.real_name }}</Col>
		  </Row>
		  <Row class="mb10 newfont">
		    <Col span="12">收货人电话：{{ orderDatalist.orderInfo.user_phone }}</Col>
		    <Col span="12">收货地址：{{ orderDatalist.orderInfo.user_address }}</Col>
		  </Row>
          <div v-if="orderDatalist.orderInfo.delivery_type === 'send'">
            <Divider style="margin: 20px 0 !important" />
            <h3>配送信息</h3>
            <Row class="mb10 newfont">
              <Col span="12">送货人姓名：{{ orderDatalist.orderInfo.delivery_name }}</Col>
              <Col span="12">送货人电话：{{ orderDatalist.orderInfo.delivery_id }}</Col>
            </Row>
          </div>

          <Divider style="margin: 20px 0 !important" v-show="isPrint" />
          <Row style="margin: 50px 0 !important" class="mb10 newfont" v-show="isPrint">
            <Col span="3">签收人：</Col>
            <Col span="10" style="height:20px; border-bottom: 1px black solid;"></Col>
          </Row>
        </Card>
      </div>
      <div class="demo-drawer-footer" v-show="isPrint">
        <Button style="margin-right: 8px" @click="printDiv1">打印</Button>
      </div>
    </Drawer>
    <Modal v-model="modal2" scrollable title="物流查询" width="350" class="order_box2">
      <div class="logistics acea-row row-top">
        <div class="logistics_img">
          <img src="../../../../assets/images/expressi.jpg" />
        </div>
        <div class="logistics_cent">
          <span>物流公司：{{ orderDatalist.orderInfo.delivery_name }}</span>
          <span>物流单号：{{ orderDatalist.orderInfo.delivery_id }}</span>
        </div>
      </div>
      <div class="acea-row row-column-around trees-coadd">
        <div class="scollhide">
          <Timeline>
            <TimelineItem v-for="(item, i) in result" :key="i">
              <p class="time" v-text="item.time"></p>
              <p class="content" v-text="item.status"></p>
            </TimelineItem>
          </Timeline>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getExpress } from '@/api/order';
import print from 'print-js'

export default {
  name: 'orderDetailsPrint',
  data() {
    return {
      modal2: false,
      modals: false,
	  isShow:false,
	  shopping:[],
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      result: [],
      // print: {
      //   id: 'printDiv', // 打印元素的id 不需要携带#号
      //   preview: false, // 开启打印预览
      //   popTitle: '员工信息',
      //   previewBeforeOpenCallback: () => {
      //     console.log('触发打印预览打开前回调');
      //   },
      //   previewOpenCallback: () => {
      //     console.log('触发打开打印预览回调');
      //   },
      //   beforeOpenCallback: () => {
      //     console.log('触发打印工具打开前回调');
      //   },
      //   openCallback: () => {
      //     console.log('触发打开打印工具回调');
      //   },
      //   closeCallback: () => {
      //     console.log('触发关闭打印工具回调');
      //   },
      //   clickMounted: () => {
      //     console.log('触发点击打印回调');
      //   },
      // },
    };
  },
	// watch:{         
	// 	isShow(newVal,oldVal){
	// 		//console.log({newVal,oldVal});   //  {newVal: "陈", oldVal: "张"}
	// 		//this.isShow=newVal;
	// 	},
	// 	orderDatalist(newVal,oldVal){
	// 		//console.log({newVal,oldVal});   //  {newVal: "陈", oldVal: "张"}
	// 		//this.orderDatalist=newVal;	
	// 	},
		
	// },
  props: {
    orderDatalist: Object,
    orderId: Number,
    is_refund: Number,
    isPrint: true,
    //shopping: Array,
	// isShow:false
  },

  filters:{
    filterTruePrice(e){
      let val = e.toString()
      return val.split('.')[0] +'.'+ val.split('.')[1].substr(0,2)
    },

    filterDeliver(val){
      if(val){
        let date = val.length > 10 ? new Date(val) : new Date(val*1000);
        let Y = date.getFullYear() + '-';
        let M = (date.getMonth()+1 <= 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        let D = date.getDate() >= 10 ? date.getDate() + ' ' : '0' + date.getDate() + ' ';
        let h = date.getHours() >= 10 ? date.getHours() + ':' : '0' + date.getHours() + ':';
        let m = date.getMinutes() >= 10 ? date.getMinutes() + ':' : '0' + date.getMinutes() + ':';
        let s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds();
        return Y+M+D+h+m+s;
      }else{
        return '暂未发货'
      }
   },
   
    filterTime(val){
      if(val){
        let date = val.length > 10 ? new Date(val) : new Date(val*1000);
        let Y = date.getFullYear() + '-';
        let M = (date.getMonth()+1 <= 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        let D = date.getDate() >= 10 ? date.getDate() + ' ' : '0' + date.getDate() + ' ';
        let h = date.getHours() >= 10 ? date.getHours() + ':' : '0' + date.getHours() + ':';
        let m = date.getMinutes() >= 10 ? date.getMinutes() + ':' : '0' + date.getMinutes() + ':';
        let s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds();
        return Y+M+D+h+m+s;
      }else{
        return '暂未发货'
      }
    },
  },

  methods: {
	printDiv1()
	{
		const style = '@page { margin:30px 80px 50px 50px; } div { font-size:13px} '
        //     position: fixed;
        //     top: 0;
        //     bottom: 0;
        //     left: 0;
        //     right: 0;
        //     pointer-events: none;
        // }
        // .shuiyin-item{
        //     color: #999;
        //     pointer-events: none;
        //     display: inline-block;
        //     width: 300px;
        //     height: 50px;
        //     line-height: 50px;
        //     font-size: 20px;
        //     transform: rotateZ(-45deg);
        // }
		print({
		  printable: 'printDiv',//要打印内容的id
		  type: 'html',
		  style: style,
		  documentTitle:'234234dsfsdf',
		  scanStyles: false
		});
		//console.log("printDiv1");
	},
    openLogistics() {
      this.getOrderData();
      this.modal2 = true;
    },
    // 获取订单物流信息
    getOrderData() {
      getExpress(this.orderId)
        .then(async (res) => {
          this.result = res.data.result;
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
  },
  computed: {},
};
</script>

<style scoped lang="stylus">
@media print {
    html, body {
        height: inherit;
    }
  }
.ivu-description-list-title {
  margin-bottom: 16px;
  color: #17233d;
  font-weight: 500;
  font-size: 18px;
}

.logistics {
  align-items: center;
  padding: 10px 0px;

  .logistics_img {
    width: 45px;
    height: 45px;
    margin-right: 12px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .logistics_cent {
    span {
      display: block;
      font-size: 12px;
    }
  }
}

.trees-coadd {
  width: 100%;
  height: 400px;
  border-radius: 4px;
  overflow: hidden;

  .scollhide {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-left: 18px;
    padding: 10px 0 10px 0;
    box-sizing: border-box;

    .content {
      font-size: 12px;
    }

    .time {
      font-size: 12px;
      color: #2d8cf0;
    }
  }
}

.order_box2 {
  position: absolute;
  z-index: 999999999;
}

.order_box >>> .ivu-modal-header {
  padding: 30x 16px !important;
}

.order_box >>> .ivu-card {
  font-size: 12px !important;
}

.fontColor1 {
  color: red !important;
}

.fontColor2 {
  color: #000 !important;
}

.order_box >>> .ivu-description-term {
  padding-bottom: 10px !important;
}

.order_box >>> .ivu-description-detail {
  padding-bottom: 10px !important;
}

.order_box >>> .ivu-modal-body {
  padding: 0 16px !important;
}

.fontColor3 {
  color: #f1a417 !important;
}

.fontColor3 {
  color: #f1a417 !important;
}

.pic {
  display: flex;
  flex-wrap: wrap;
}

.img {
  width: 100px;
  height: 100px;
  margin: 10px 10px;

  img {
    width: 100%;
    height: 100%;
  }
}

.demo-drawer-footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}

.divflex{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .item{
    text-align: left;
    width: 50%;
  }
}

.newfont{
  font-weight: 600;
  font-family: '黑体';
  color:#000;
}
</style>
